<template>
    <div class="personal" v-infinite-scroll="load">
        <div class="header">
            <div class="image2">
                <div class="home"><el-button type="primary" icon="el-icon-s-fold" @click="jump(1)">首页</el-button></div>
                <div class="home"><el-button type="primary" icon="el-icon-setting" @click="jump(2)">设置</el-button></div>
                <div class="home"><el-button type="primary" icon="el-icon-coin" @click="jump(3)">会员</el-button></div>
                <div class="home"><el-button type="primary" icon="el-icon-bangzhu" @click="jump(4)">客服</el-button></div>
            </div>
            <div style="width: 500px;height: 60px;display: inline-block;margin-left: 50px;float: left;margin-top: 10px;">
                <el-input placeholder="请输入关键词..." v-model="search"><el-link :underline="false" slot="suffix"
                        class="el-icon-search"
                        style="font-size: 150%;margin-top: 10px;margin-right: 10px;"></el-link></el-input>
            </div>
        </div>
        <div class="main">
            <div class="background">
                <div class="avatar">
                    <el-avatar :size="60" :src="user.avatar_url"></el-avatar>
                </div>
                <div class="user">
                    <div class="username">{{ user.name }}</div>
                    <div class="introduction">{{ user.introduction }}</div>
                </div>
            </div>
            <div class="menu">
                <el-menu class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="1" class="el-icon-house" @click="jump(5)">主页</el-menu-item>
                    <el-menu-item index="2" class="el-icon-s-check" @click="jump(6)">关注&nbsp;{{ user.Follow }}</el-menu-item>
                    <el-menu-item index="3" class="el-icon-star-off" @click="jump(7)">收藏&nbsp;{{ user.collect }}</el-menu-item>
                    <el-menu-item index="4" class="el-icon-edit-outline" @click="jump(8)">动态&nbsp;{{ user.dynamic }}</el-menu-item>
                    <el-menu-item index="5" class="el-icon-user" @click="jump(11)">粉丝&nbsp;{{ user.Fans }}</el-menu-item>
                </el-menu>
            </div>
            <div>
                <div class="information">
                    <router-view ref="history" :user_information="user"></router-view>
                </div>
                <div class="special">
                    <el-image style="width: 380px; height: 408px" :src="require('@/assets/image/7.png')"
                        fit="fill"></el-image>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
export default {
    data(){
        return{
            search:'',//搜索关键词
            user:{
                id:0,//用户id
                name:'',//用户名
                introduction:'',//用户简介
                avatar_url:'',//用户头像地址
                Follow:0,//用户关注数
                Fans:0,//用户粉丝数
                dynamic:0,//用户发布视频数
                collect:0,//用户收藏视频数
            }
        }
    },
    methods:{
        //下拉出现数据
        load(){
            this.$refs['history'].load()
        },
        //跳转
        jump(index){
            var _this = this
            switch (index) {
                case 1:
                    this.$router.push('/');
                    break;
                case 2:
                    var {href} = this.$router.resolve('/download');
                    window.open(href,"_blank");
                    break;
                case 3:
                    var {href} = this.$router.resolve('/recharge');
                    window.open(href,"_blank");
                    break;
                case 4:
                    var {href} = this.$router.resolve('/servise');
                    window.open(href,"_blank");
                    break;
                case 5:
                    this.$router.replace('/friend_person?id='+_this.user.id);
                    break;
                case 6:
                    this.$router.replace('/friend_follow?id='+_this.user.id);
                    break;
                case 7:
                    this.$router.replace('/friend_collect?id='+_this.user.id);
                    break;
                case 8:
                    this.$router.replace('/friend_release?id='+_this.user.id);
                    break;
                case 9:
                    this.$router.replace('/history');
                    break;
                case 10:
                    this.$router.replace('/modify');
                    break;
                case 11:
                    this.$router.replace('/friend_fans?id='+_this.user.id);
                    break;
                case 12:
                    this.$router.replace('/contribute');
                    break;
            }
        }
    },
    created(){
        var _this = this
        var id = this.$route.query.id
        _this.user.id = id
        var friend = {
            id:id
        }
        //获取好友基本信息
        UserManagementApi.SubmitUserVOByUser(friend).then(res => {
            _this.user.name = res.data.data.name
            _this.user.introduction = res.data.data.introduction
            _this.user.avatar_url = res.data.data.avatarUrl
        })
        //获取关注数
        PersonalCenterApi.SubmitFollowCount(id).then(res => {
            _this.user.Follow = res.data.data
        })
        //获取粉丝数
        PersonalCenterApi.SubmitFollowFansCount(id).then(res => {
            _this.user.Fans = res.data.data
        })
        //收藏数
        PersonalCenterApi.SubmitByUserIdGetCollectNum(id).then(res => {
            _this.user.collect=res.data.data
        })
        VideoPlayApi.SubmitReleaseCount(id).then(res => {
            _this.user.dynamic = res.data.data
        })
    }
};
</script>

<style scoped>
@import "../assets/css/body.css";

.personal {
    background-color: #d9eafb;
    overflow:auto;
    height: 100%;
    width: 100%;
}

.header {
    height: 60px;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    display: inline-block;
    background-color: white;
}

.home {
    display: inline-block;
    margin-right: 40px;
}

.image2 {
    float: left;
    padding: 10px;
    margin-left: 100px;
}

.image3 {
    float: left;
    padding: 10px;
    width: 500px;
}

.image4 {
    width: 250px;
    height: 60px;
    float: left;
    margin-left: 30px;
}

.background {
    display: inline-block;
    height: 200px;
    width: 1300px;
    background-image: url('../assets/image/6.png');
    background-repeat: no-repeat;
    background-size: cover;
    text-align: left;
}

.main {
    text-align: center;
}

.avatar {
    margin-top: 130px;
    margin-left: 30px;
    float: left;
}

.username {
    font-size: 140%;
}

.introduction {
    margin-top: 10px;
    height: 20px;
    width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user {
    float: left;
    margin-top: 130px;
    margin-left: 30px;
}

.menu {
    width: 1300px;
    display: inline-block;
}

.information {
    display: inline-block;
    width: 900px;
    background-color: white;
}

.special {
    display: inline-block;
    background-color: blueviolet;
    width: 380px;
    height: 408px;
    margin-left: 20px;
    vertical-align: top
}</style>